import { postMychatInvalidId, postMychatSendmobieId, postMychatSendresumeId, postMychatSendwechatId } from "@/apis/endpoint/myChat"
import { RouteParams } from "../types"
import { Popup } from "@taroify/core"
import { Image, View } from "@tarojs/components"
import { GpTouchableView } from "@/components/GpTouchableView"
import GpVerticelLine from "@/components/GpVerticelLine"
import GpFontIcon from "@/components/GpFontIcon"
import { Text } from "@tarojs/components"
import { useRef, useState } from "react"
import Taro from "@tarojs/taro"
import { MyChatConversationResult } from "@/apis/endpoint/model"
import { privatifyMobile } from "@/utils/helper"

enum ActionType {
  SEND_RESUME,
  SWAP_MOBILE,
  SWAP_WECHAT,
  MARK_UNFIT
}
export function useActions(params: RouteParams, getNextMessage: (messageId: number) => Promise<void>) {
  const actionOptions: IOption<ActionType>[] = [
    { value: ActionType.SEND_RESUME, label: "发简历", icon: "/static/images/chat/send-resume.png" },
    { value: ActionType.SWAP_MOBILE, label: "换电话", icon: "/static/images/chat/phone.png" },
    { value: ActionType.SWAP_WECHAT, label: "换微信", icon: "/static/images/chat/wechat.png" },
    { value: ActionType.MARK_UNFIT, label: "不合适", icon: "/static/images/chat/unfit.png" }
  ]
  const [confirmPopupOpen, setConfirmPopupOpen] = useState(false)
  const actionType = useRef<INullable<ActionType>>(null)
  async function handleAction(action: IOption<ActionType>) {
    if (action.value === ActionType.MARK_UNFIT) {
      const { confirm } = await Taro.showModal({
        content: "确定标记不合适吗?",
        cancelText: "关闭",
        confirmText: "确认",
        confirmColor: "#0768FA",
      })
      if (confirm) actionHandler(action.value)
    } else {
      actionType.current = action.value
      setConfirmPopupOpen(true)
    }
  }
  async function actionHandler(value: ActionType) {
    const id = Number(params.id)
    let message = ""
    if (value === ActionType.SEND_RESUME) {
      const nextMessageId = await postMychatSendresumeId(id).send()
      nextMessageId && await getNextMessage(nextMessageId)
      message = "简历已发送"
    } else if (value === ActionType.SWAP_MOBILE) {
      const nextMessageId = await postMychatSendmobieId(id).send()
      nextMessageId && await getNextMessage(nextMessageId)
      message = "已交换电话"
    } else if (value === ActionType.SWAP_WECHAT) {
      const nextMessageId = await postMychatSendwechatId(id).send()
      nextMessageId && await getNextMessage(nextMessageId)
      message = "已交换微信"
    } else if (value === ActionType.MARK_UNFIT) {
      await postMychatInvalidId(id).send()
      message = "已标记不合适"
    }
    Taro.showToast({
      title: message,
      icon: "success",
      duration: 1500
    })
  }
  function closeConfirmPopup() {
    setConfirmPopupOpen(false)
    actionType.current = null
  }
  function confirmPopupAction() {
    actionHandler(actionType.current!).then(closeConfirmPopup)
  }
  function renderConfirmPopup(chatDetail: INullable<MyChatConversationResult>) {
    if (!chatDetail) return null
    const value = actionType.current
    const entity: JSX.Element[] = []
    let title:React.ReactNode, content: React.ReactNode
    if (value === ActionType.SEND_RESUME) {
      const fullNames = `${chatDetail.memberName}-${chatDetail.jobName}`
      const showNames = fullNames.length > 9 ? fullNames.slice(0, 8).concat("...") : fullNames
      entity.push(
        <GpFontIcon name="icon-ic_jianli" size={64} color="#0768FA" className="flex-none" />,
        <View className="box-border flex-1 w-0">
          <View className="flex flex-row items-center text-[24px] text-primary font-bold">
            <Text className="!leading-[24px]">{showNames}</Text>
            <Text className="!leading-[24px]">.pdf</Text>
          </View>
          {/* <View className="text-placeholder text-[22px] !leading-[22px] mt-[12px]">更新于2025.09.09</View> */}
          <View className="flex flex-row items-center gap-[8px] mt-[12px]">
            <GpFontIcon name="icon-ic_shouji" size={22} color="#0768FA" />
            <Text className="text-[22px] !leading-[22px] text-[#0768FA]">号码已隐藏</Text>
          </View>
        </View>
      )
      title = "确认发送附件简历吗？"
      content = "已开启隐私保护。附件简历内的联系方式已隐藏，获得加密简历的HR，将用虚拟号与你联系"
    } else if (value === ActionType.SWAP_WECHAT) {
      entity.push(
        <GpFontIcon name="icon-ic_weixin" size={64} color="#0768FA" className="flex-none" />,
        <View className="text-primary text-[28px] !leading-[28px] font-bold">
          {chatDetail.memberWeChat}
        </View>
      )
      title = "确认与对方交换微信吗？"
      content = "交换成功后，双方可以查看彼此的微信号"
    } else if (value === ActionType.SWAP_MOBILE) {
      entity.push(
        <GpFontIcon name="icon-ic_shoujihao" size={64} color="#0768FA" className="flex-none" />,
        <View className="text-primary text-[28px] !leading-[28px] font-bold">
          {chatDetail.memberMobile ? privatifyMobile(chatDetail.memberMobile) : null}
        </View>
      )
      title = "确认与对方交换电话吗？"
      content = "交换成功后，双方可以查看彼此的电话号码"
    }
    return title && (
      <Popup open={confirmPopupOpen} lock className="rounded-[48px] !bg-transparent overflow-hidden" onClose={closeConfirmPopup}>
        <View className="bg-white w-[590px] box-border">
          <View className="relative">
            <Image src={require("../../images/modal-bg.png")} className="w-full h-[320px] object-cover block" />
            <View className="absolute w-[400px] h-[144px] left-[98px] top-[128px] flex flex-row items-center gap-[24px] px-[32px]">
              {entity}
            </View>
          </View>
          <View className="p-[48px]">
            <View className="text-primary text-[36px] !leading-[36px]">{title}</View>
            <View className="text-third text-[28px] !leading-[40px] mt-[24px]">
              {content}
            </View>
          </View>
          <View className="flex flex-row items-stretch box-border h-[112px] border-t border-solid border-t-[#EEEEEE]">
            <GpTouchableView className="flex flex-row justify-center items-center text-third text-[28px] flex-1" onClick={closeConfirmPopup}>
              关闭
            </GpTouchableView>
            <GpVerticelLine width={2} height={112} color="#EEEEEE" />
            <GpTouchableView className="flex flex-row justify-center items-center text-theme text-[28px] flex-1" onClick={confirmPopupAction}>
              确定
            </GpTouchableView>
          </View>
        </View>
      </Popup>
    )
  }
  return {
    actionOptions,
    renderConfirmPopup,
    handleAction
  }
}
